import React , { Component } from 'react'

import { Tabs, WhiteSpace } from 'antd-mobile';

import { Link } from 'react-router-dom'

import HomeListContainer from './HomelistStyleComp'

//定义无状态组件，用以渲染列表
const Itemlist1 = props => {
    return(
        <Link className="item_link"
            to={{
            pathname:"/homelist",
            search: `?brand_id=${props.goods_jump_url.split('/')[4].replace('?shop_id=','_')}`,
        }}
        >
            <div className="list_item">
                    <div className="item_url">
                        <img src={props.pic_url}/>
                    </div>
                    <p className="item_price">
                        <span className="new_price">{props.coupon_tips}</span>
                    </p>
                    <p className="item_title">
                        <span className="title">{props.title}</span>
                        <span className="time_left">{props.time_left}</span>
                    </p>
            </div>
        </Link>
    )
}

const Itemlist2 = props => {
    return(
        <Link className="item_link"
            to={{
            pathname:"/details",
            search: `?goods_id=${props.goods_id}`
        }}
        >
            <div className="list_item">
                    <div className="item_url">
                        <img src={props.pic_url}/>
                    </div>
                    <p className="item_price">
                        <span className="new_price">{props.coupon_tips}</span>
                    </p>
                    <p className="item_title">
                        <span className="title">{props.title}</span>
                        <span className="time_left">{props.time_left}</span>
                    </p>
            </div>
        </Link>
    )
}



class HomeList extends Component{
    constructor(){
        super()
        this.state={
            listFlag:true
        }
    }
    renderContent =() =>{
        return (
            <div className="home_list">
               
               { this.state.listFlag 
                && (this.props.homelists_p1 && this.props.homelists_p1.map(item =><Itemlist1 key={item.sku_id} {...item}/> ))
                || (this.props.homelists_p2 && this.props.homelists_p2.map(item =><Itemlist2 key={item.goods_code} {...item}/>))}
                
            </div> 
        );
    }
    
    //点击切换，改变数据
    changeTab = () => {
        this.setState({
            listFlag:!this.state.listFlag
        })
    }
    render(){

        const tabs = [
            { title: '精选专场',id:1},
            { title: '精选单品',id:2 },
          ];
    
      return(
          <HomeListContainer>
                <WhiteSpace />
                    <Tabs tabs={tabs} key={tabs.id}
                     onChange={() => {
                         this.changeTab()
                        }}
                     renderTabBar={props => <Tabs.DefaultTabBar {...props} page={2} />}>
                    {this.renderContent}
                    </Tabs>
                <WhiteSpace />
          </HomeListContainer>
      )
    }

}


export default HomeList